<template>
  <div class="wrap" ref="workingRef">
    <!-- 查询 -->
    <!-- 搜索 -->
    <el-card style="height: 30%">
      <!-- 表单搜索 -->
      <el-form size="mini" ref="batchJsForm" :label-width="formLabelWidth">
        <!-- 表头查询 -->
        <!-- 第一行 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="5">
            <!-- 调度 -->
            <el-form-item label="调度:">
              <el-select
                v-model="queryDetailParam.regulationOrgId"
                placeholder="请选择"
                @change="regulationOrgChange(queryDetailParam.regulationOrgId)"
              >
                <el-option
                  v-for="item in dispatchList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <!-- <el-form-item label="场站名称:"> -->
            <!-- <FuzzyQueryInput
              :api="queryStationNameList"
              :style="{ width: '115%' }"
              ref="stationRef"
              :isRule="false"
            /> -->
            <FuzzyQueryInput
              @inputChange="inputChange"
              ref="stationRef"
              :api="queryStationNameList"
              labelText="场站名称:"
              :style="{ width: '110%' }"
              @handleClear="handleClear_1"
              :queryParam1="queryParam1"
            />
          </el-col>
          <el-col :span="5">
            <!-- 升压站接入等级 -->
            <el-form-item label="升压站接入等级:">
              <el-select
                v-model="queryDetailParam.voltageLevelCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in voltageLevelLists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产权单位:">
              <el-input
                v-model.trim="queryDetailParam.ownersName"
                clearable
                maxlength="40"
                placeholder="输入产权单位名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="5">
            <!-- 调度 -->
            <el-form-item label="是否已整站投产:">
              <el-select
                v-model="queryDetailParam.isProduction"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in isYes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="整站容量范围:">
              <el-input
                v-model.trim="queryDetailParam.capStart"
                clearable
                type="number"
                style="width: calc(50% - 22px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="padding-right: 5px; padding-left: 5px">-</span>
              <el-input
                v-model.trim="queryDetailParam.capEnd"
                clearable
                type="number"
                style="width: calc(50% - 22px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="margin-left: 5px; font-size: 12px">MW</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="整站投产时间:">
              <el-date-picker
                v-model="queryDetailParam.productionTime"
                type="date"
                :value-format="'yyyy-MM-dd'"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否已投入:">
              <el-select
                v-model="queryDetailParam.isRegulation"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in isYes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="5">
            <el-form-item label="上调下调是否投入:">
              <el-select
                v-model="queryDetailParam.adjustRegulationCode"
                placeholder="请选择上调下调是否投入"
                clearable
              >
                <el-option
                  v-for="item in adjustRegulationList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否具备惯量响应:" style="margin-left: 17%">
              <el-select
                v-model="queryDetailParam.isResponse"
                placeholder="请选择是否具备惯量响应"
                clearable
              >
                <el-option
                  v-for="item in isYes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最大上下调节能力:" style="margin-left: 22%">
              <el-input
                v-model.trim="queryDetailParam.powerStart"
                clearable
                type="number"
                style="width: calc(50% - 22px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="padding-right: 5px; padding-left: 5px">-</span>
              <el-input
                v-model.trim="queryDetailParam.powerEnd"
                clearable
                type="number"
                style="width: calc(50% - 22px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="margin-left: 5px; font-size: 12px">MW</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="每分钟调节速率:" style="margin-left: 22%">
              <el-input
                v-model.trim="queryDetailParam.speedStart"
                clearable
                type="number"
                style="width: calc(50% - 22px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="padding-right: 5px; padding-left: 5px">-</span>
              <el-input
                v-model.trim="queryDetailParam.speedEnd"
                clearable
                type="number"
                style="width: calc(50% - 22px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="margin-left: 5px; font-size: 12px">MW</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label-width="160px" label="最大调节能力持续响应时间:">
              <el-input
                v-model.trim="queryDetailParam.powerDurationStart"
                clearable
                type="number"
                style="width: calc(38% - 25px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="padding-right: 5px; padding-left: 5px">-</span>
              <el-input
                v-model.trim="queryDetailParam.powerDurationEnd"
                clearable
                type="number"
                style="width: calc(38% - 25px)"
                oninput="value= value.length>40?value.slice(0,40):value"
              />
              <span style="margin-left: 5px; font-size: 12px">MW</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              style="margin-left: 37%"
              type="primary"
              class="newButtonColor SearchBTN"
              @click="searchList"
              size="mini"
              >检索</el-button
            >
            <el-button
              class="newButtonColor SearchBTN"
              size="mini"
              @click="resetSearchList"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card style="margin-top: 20px; height: 68%; margin-bottom: 20px">
      <CleanForm
        :searShow="true"
        :showColumnHandle="false"
        :api="queryCommonStationUnitsInfo"
        :queryParam="queryDetailParam"
        :fieldList="headList"
        :tableOptionWidth="200"
        :showColumnSetting="false"
        :page="false"
        :dialogPage="true"
        :showExportBtn="false"
        :isShow="false"
        :showCheckbox="true"
        ref="conventionalUnitTable"
      >
        <template slot="tableTopOptionRight">
          <!-- 这里是写表格上方的按钮 -->
          <div>
            <span
              class="operateButton b-border"
              @click="editWindPower()"
              operate="edit"
              ><img src="@/assets/icon/392.png" /> 编辑</span
            >
            <span
              class="operateButton b-border"
              @click="exportExcel()"
              operate="export"
              ><img src="@/assets/icon/395.png" /> 导出</span
            >
            <span
              class="operateButton b-border"
              @click="exportExcel()"
              operate="export"
              ><img src="@/assets/icon/395.png" /> 下发</span
            >
          </div>
        </template>
      </CleanForm>
    </el-card>
    <!-- 新增弹框 -->
    <!-- 加一个<div v-if="dialogFormVisible">是保证在打开子组件弹窗的时候，保证每次都执行created() -->
    <div v-if="dialogFormVisible">
      <!-- width="1500px"  写成px，不写成%，是因为放大的时候可以有滚动条 -->
      <!-- <el-dialog
        :title="addDialogVisibleTitle"
        :visible.sync="dialogFormVisible"
        width="80%"
        :append-to-body=true
        top="7vh"
      > -->
      <el-dialog
        :title="addDialogVisibleTitle"
        :visible.sync="dialogFormVisible"
        width="1500px"
        top="7vh"
        class="test"
        :append-to-body="true"
      >
        <!-- <test-result-edit
          :queryDetailParam="queryDetailParam"
          ref="childRules"
          :key="id"
          :operate="operate"
          :dispatchList="dispatchList"
          :stationTypeLists="stationTypeLists"
        ></test-result-edit> -->
        <el-form
          size="mini"
          :model="queryDetailDialog"
          :rules="rules"
          ref="childRules"
          :label-width="formLabelWidth"
        >
          <!-- 表头查询 -->
          <!-- 第一行 -->
          <el-row type="flex" justify="space-between">
            <el-col :span="5">
              <!-- 调度 -->
              <el-form-item label="调度:">
                <el-select
                  v-model="queryDetailDialog.regulationOrgId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dispatchList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="场站名称:" prop="stationName">
                <el-input
                  v-model.trim="queryDetailDialog.stationName"
                  clearable
                  maxlength="40"
                  placeholder="输入场站名称"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <!-- 升压站接入等级 -->
              <el-form-item label="升压站接入等级:">
                <el-select
                  v-model="queryDetailDialog.voltageLevelCode"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in voltageLevelLists"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="5">
            <el-form-item label="产权单位:"  prop="ownersName"  >
              <el-input
                v-model.trim="queryDetailDialog.ownersName"
                clearable
                maxlength="40"
                placeholder="输入产权单位名称"
              />
            </el-form-item>
          </el-col> -->
            <el-col :span="5">
              <el-form-item label="控制单元:">
                <el-input
                  v-model.trim="queryDetailDialog.unitsName"
                  clearable
                  maxlength="40"
                  placeholder="输入控制单元"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row type="flex" justify="space-between">
            <el-col :span="5">
              <el-form-item label="上调下调是否投入:">
                <el-select
                  v-model="queryDetailDialog.adjustRegulationCode"
                  placeholder="请选择上调下调是否投入"
                  clearable
                >
                  <el-option
                    v-for="item in adjustRegulationList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="是否具备惯量响应:">
                <el-select
                  v-model="queryDetailDialog.isResponse"
                  placeholder="请选择是否具备惯量响应"
                  clearable
                >
                  <el-option
                    v-for="item in isYes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="频率响应死区:">
                <el-input
                  v-model.trim="queryDetailDialog.deadZone"
                  clearable
                  type="number"
                  maxlength="40"
                  placeholder="输入频率响应死区"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="调差系数:">
                <el-input
                  v-model.trim="queryDetailDialog.adjustRatio"
                  clearable
                  type="number"
                  maxlength="40"
                  placeholder="输入调差系数"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="saveForm()">{{
            this.addDialogVisibleTitle == '编辑' ? '确认编辑' : '确认新增'
          }}</el-button>
          <el-button
            type="primary"
            v-if="this.addDialogVisibleTitle != '编辑'"
            size="small"
            @click="resetCon()"
            >重置
          </el-button>
          <el-button size="small" @click="dialogFormVisible = false"
            >退出
          </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 预览弹框 -->
    <el-dialog
      title="预览"
      top="7vh"
      width="70%"
      :visible.sync="dialogPreVisible"
      @close="
        () => {
          pdf = ''
        }
      "
    >
      <iframe
        style="width: 100%; height: 450px"
        frameborder="0"
        width="100%"
        height="620px"
        :src="pdf"
        v-if="pdf"
        type="application/x-google-chrome-pdf"
        ref="previewFrame"
      ></iframe>
      <div
        class="table-html-wrap"
        v-if="!pdf"
        style="width: 100%; height: 420px; overflow: auto"
        id="tableHtml"
      ></div>
    </el-dialog>
  </div>
</template>
<script>
import customOrderManagement from './js/index.js'
export default customOrderManagement
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
